<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div>
            <h2>create</h2>
            <ul>
                <li><label for="id">编号<input type="text" v-model="userinfo.id"></label></li>
                <li><label for="name">姓名<input type="text" v-model="userinfo.name"></label></li>
                <li><label for="age">年龄<input type="text" v-model="userinfo.age"></label></li>
                <li><label for="sex">行吧<input type="text" v-model="userinfo.sex"></label></li>
                <li><button type="button" @click="adduser()">create</button></li>
            </ul>
        </div>

        <div>
            <h2>update</h2>
            <ul>
                <li><label for="id">编号<input type="text" v-model="editinfo.id"></label></li>
                <li><label for="name">姓名<input type="text" v-model="editinfo.name"></label></li>
                <li><label for="age">年龄<input type="text" v-model="editinfo.age"></label></li>
                <li><label for="sex">行吧<input type="text" v-model="editinfo.sex"></label></li>
                <li><button type="button" @click="moduser()">update</button></li>
            </ul>
        </div>


        <div v-if="userList.length > 0">
            <table border="1" cellspacing="0" cellpadding="0">
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>行吧</th>
                    <th>操作</th>
                </tr>
                <tr v-for="(item,index) in userList">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.age}}</td>
                    <td>{{item.sex}}</td>
                    <td>
                        <button @click="deluser(index)">删除</button>
                        <button @click="edituser(index)">修改</button>
                    </td>
                </tr>
            </table>
        </div>
        <div v-else>
            <h2>没有用户</h2>
        </div>
    </div>

    <script src="../vue-2/js/vue.js"></script>
    <script>
       let myApp = new Vue({
           el:'#app',
           data:{
               userList:[],
               userinfo:{
                   id:'',
                   name:"",
                   age:'',
                   sex:''
               },
               editinfo:{
                   id:'',
                   name:"",
                   age:'',
                   sex:''
               },
               currenIndex:0
           },
           methods:{
               adduser(){
                   this.userList.push(this.userinfo)
                   this.userinfo={
                       id:'',
                       name:'',
                       age:'',
                       sex:''

                   }
               },
               deluser(index){
                   this.userList.splice(index,1)
               },
               edituser(index){
                   this.editinfo = JSON.parse(JSON.stringify(this.userList[index]))

                   this.currenIndex  = index
               },
               moduser(index){
                   this.userList[this.currenIndex] = this.editinfo

                   this.userList = JSON.parse(JSON.stringify(this.userList))
               }
           }
       })
    </script>


</body>
</html>